<template>
	<div id="expertrecommend">
    	<com-head>详情</com-head>
			<div class="box" v-if="this.status==='1'">
    			<div class="left">
    				<img :src="img" alt="" />
    				<div class="qiuyuan">{{zhiye}}</div>
    			</div>
    			<div class="right">
    				<p>{{name1}}</p>
    				<p>{{detail}}</p>
    				<p>{{date}}</p>
    				<div class="zhong">{{verdictType[status]}}</div>
    			</div>
    	</div>

			<div class="box2">
					<p style="display: inline-block;">{{name2}}&emsp;{{begin_time}}</p>
					<div class="yuan zhong" style="display: inline-block;" v-if="this.status==='1'">{{verdictType[status]}}</div>
					<p class="teamtwo">{{main_team}}&nbsp;vs&nbsp;{{team}}</p>
					<div style="overflow: hidden;"  v-if="team_result"><div class="left">{{team_result}}</div><div class="right">{{main_team_result}}</div></div>
					<p class="conmes" v-html="content"></p>
			</div>
			<com-foot :select="5"></com-foot>	
	</div>
</template>

<script>
export default {
  name: "expertrecommend",
  data() {
    return {
      status: this.$route.query.status,
      id: this.$route.query.id,
      expertid: this.$route.query.expertid,
      verdictType: { "1": "中", "2": "不中" },
      zhiye: "",
      img: require("../assets/images/qiuyuan.png"),
      name1: "",
      detail: "",
      date: "",
      status: "",
      name2: "",
      begin_time: "",
      main_team: "",
      team: "",
      team_result: "",
      main_team_result: "",
      content: "",
    };
  },
  created() {
    // console.log(this.$route.query.id);
    if (parseInt(this.$route.query.status) === 0) {
      // 请求昨日当红
      this.danghong();
    } else if (parseInt(this.$route.query.status) === 1) {
      this.detailTop(); //上边
      this.expertDetail(); //下边
    } else if (parseInt(this.$route.query.status) === 2) {
      this.danghong(); //下边
    }
  },
  mounted () {
  //  console.log(this.$route.query.status);
  //   console.log(this.expertid);
  },
  methods: {
    danghong() {
      this.axios.post("News/show", {
          id: this.$route.query.id
        })
        .then(({ data }) => {
            console.log(data);
            (this.name2 = data.title),
            (this.begin_time = data.begin_time),
            (this.main_team = data.main_team),
            (this.team = data.team),
            (this.team_result = data.team_result),
            (this.main_team_result = data.main_team_result),
            (this.content = data.content);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    detailTop() {
      this.axios.post("Ball/index_index", { id: this.$route.query.expertid })
        .then(response => {
            console.log(response.data);
            (this.zhiye = response.data.football.position),
            (this.img = response.data.football.expert_img),
            (this.name1 = response.data.football.expert_name),
            (this.detail = response.data.football.expert),
            (this.date = response.data.football.add_time),
            (this.status = response.data.football.status),
            (this.probability = response.data.football.probability);
        });
    },
    expertDetail() {
      console.log(111);
      console.log(this.id);
      this.axios.post("Ball/history_list", { id: this.$route.query.id })
        .then(response => {
            console.log(response.data);
            (this.name2 = response.data.title),
            (this.begin_time = response.data.begin_time),
            (this.main_team = response.data.main_team),
            (this.team = response.data.team),
            (this.team_result = response.data.team_result),
            (this.main_team_result = response.data.main_team_result),
            (this.content = response.data.content);
        });
    }
  }
};
</script>

<style lang="scss">
#expertrecommend {
  padding: 90px 49px 0 49px;
  background-color: #ffc29b;
  .box {
    width: 662px;
    height: 226px;
    margin-left: -18px;
    margin-top: 29px;
    background: rgba(255, 255, 255, 1);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    position: relative;
    &::before {
      content: "";
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background: #ffc29b;
      position: absolute;
      top: 50px;
      left: -15px;
    }
    &::after {
      content: "";
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background: #ffc29b;
      position: absolute;
      top: 50px;
      right: -15px;
    }
    .left {
      width: 125px;
      height: 176px;
      margin: 30px 25px 25px 0;
      box-sizing: border-box;
      border-radius: 5px;
      position: relative;
      img {
        width: 100%;
      }
      .qiuyuan {
        width: 55px;
        height: 30px;
        -webkit-text-size-adjust: none;
        background-color: #fb690a;
        position: absolute;
        left: 37px;
        bottom: 13px;
        text-align: center;
        line-height: 35px;
        color: rgba(255, 255, 255, 1);
        font-size: 12px;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.7);
      }
    }
    .right {
      width: 455px;
      height: 176px;
      line-height: 40px;
      box-sizing: border-box;
      padding-top: 20px;
      position: relative;
      p:nth-of-type(1) {
        font-size: 26px;
        color: rgba(77, 77, 77, 1);
        font-weight: 700;
      }
      p:nth-of-type(2) {
        font-size: 20px;
        color: rgba(124, 124, 124, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      p:nth-of-type(3) {
        font-size: 18px;
        color: rgba(153, 153, 153, 1);
      }
      .zhong {
        width: 106px;
        height: 37px;
        background: rgba(169, 34, 39, 1);
        border-radius: 5px;
        color: white;
        font-size: 24px;
        text-align: center;
        position: absolute;
        right: 15px;
        top: 20px;
      }
    }
  }
  .box2 {
    width: 662px;
    // height:722px;
    margin-top: 30px;
    margin-left: -18px;
    background: rgba(255, 255, 255, 1);
    position: relative;
    vertical-align: top;
    padding: 0 20px;
    box-sizing: border-box;
    p:nth-of-type(1) {
      font-size: 20px;
    }
    .teamtwo {
      font-size: 30px;
    }
    .conmes {
      font-size: 26px;
      text-indent: 2em;
      color: #7c7c7c;
    }
    .yuan {
      width: 30px;
      height: 30px;
      font-size: 12px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      background-color: red;
      border-radius: 15px;
    }
    .left {
      height: 35px;
      float: left;
      font-size: 18px;
      text-align: center;
      line-height: 35px;
      margin-right: 10px;
      padding: 0 5px;
      border-radius: 5px;
      color: #fff;
      background-color: #b30c20;
    }
    .right {
      height: 35px;
      float: left;
      font-size: 18px;
      text-align: center;
      padding: 0 5px;
      line-height: 35px;
      border-radius: 5px;
      color: #fff;
      background-color: #b30c20;
    }
  }
}
</style>
